Q: 不會設計怎麼辦？
A: 小編也不會設計，但可以把別人的設計變成網頁！

本篇開始將使用transform跟transition屬性做微動畫，透過操控這兩個屬性，除了可以讓元素在狀態間有漸變的效果外，還可以對元素做位移、旋轉、放大縮小等效果。讓我們先來了解這兩個屬性吧！

「工欲善其事，必先利其器」

transform

這個屬性操控元素的變形，預設以元素的正中心為軸點，有許多值可以設定，以下來介紹之後會用到的值～
（如後續文章有使用其他值，會再補充）

• rotate

  • 代表元素本身旋轉的角度。順時針旋轉。

• scale

  • 代表元素的大小比例。

• translate

  • 讓元素位移，使用上通常提供兩個參數。第一個參數為x軸的位移；第二個參數為y軸的位移。

• translateX

  • 讓元素以x軸方向位移。

• translateY

  • 讓元素以y軸方向位移。

transition

• 控制的是元素在狀態間的漸變，而單單一個 transition 其實是多個屬性的簡寫。

transition-property

• 這個屬性代表著「哪個屬性」要有漸變的效果。
• 若要所有屬性都有漸變效果，這個值可以設置為 all 。

.example {
  transition-property: height;
}
/* 代表`height`改變時會有漸變效果，若`width`有變化則不會漸變。 */

transition-duration

• 代表著漸變的時間是多少。
• 以秒為單位如：2s、0.3s，亦可使用毫秒如：250ms。

transition-timing-function

• 這個屬性代表著漸變期間的速度。
• 預設為ease，這個屬性的依據是貝茲曲線。

transition-delay

• 代表著元素漸變前延遲的時間。
• 以秒為單位可以下作1.5s、0.8s，亦可使用毫秒如：75ms。